<template>
  <div class="ww-scroll-displayer" :style="style">
    <div :style="animateStyle" v-for="(item,key) in new Array(3)" :key="key">{{text}}</div>
  </div>
</template>
<script>
import Style from '@/utils/styleBuilder'
export default {
  name: 'ww-scroll-displayer',
  props: {
    text: {
      type: String,
      required: true,
    },
    maxWidth: {
      type: String,
      default: '200px',
    },
  },
  computed: {
    duration () {
      return this.text.length * 1
    },
    style () {
      var style = new Style()
      style.add('max-width:' + this.maxWidth)
      return style.result()
    },
    animateStyle () {
      return 'animation: frame ' + this.duration + 's linear infinite;'
    },
  },
}
</script>
<style lang="scss">
.ww-scroll-displayer {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  mask: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    rgba(255, 255, 255, 1) 7%,
    rgba(255, 255, 255, 1) 92%,
    rgba(0, 0, 0, 0) 100%
  );
  div {
    display: inline-block;
    padding: 0 30px;
  }
}
@keyframes frame {
  0% {
    opacity: 1;
    transform: translateX(0);
  }
  1% {
    opacity: 1;
    transform: translateX(0);
  }
  99% {
    opacity: 1;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(-100%);
  }
}
</style>
